<template>
	<NavBarVue title="发布" />
	<view class="center">
		<view class="tab">
			<view v-for="(item,index) in init_list" :key="index" :class="index==initIdx? 'active':''" @click="cut(index)">
				<view class="">
					{{item.name}}
				</view>
				<view class="duan"></view>
			</view>
		</view>
		<GridFileVue :isShowCamera="isShowCamera" :showList="showList" :isShowDot="isShowDot"
			:initIdx="initIdx"/>
	</view>
	<TabBarVue type="add" />
</template>

<script setup>
	import {
		reactive,
		ref,
		watchEffect,
		computed
	} from "vue"
	import GridFileVue from '@/components/GridFile.vue';
	import {
		useCheckIfFileIsImageOrVideo
	} from '@/utils/useCheckIfFileIsImageOrVideo'
	import {
		safeAreaBottom
	} from '@/utils/getMenuData'
	import {onShow} from '@dcloudio/uni-app'

	const isShowCamera = ref(true)
	const isShowDot = ref(true)
	const showList = ref([])
	const init_list = reactive([{
		name: '全部',
	}, {
		name: "视频",
	}, {
		name: "照片"
	}])
	const initIdx = ref(0)
	const fileList = ref([{
			url: 'https://cdn.uviewui.com/uview/album/2.jpg'
		},
		{
			url: 'https://www.bilibili.com/video/av241607718/'
		}
	])
	onShow(() => {
		fileList.value = fileList.value.map((item) => ({
			...item,
			type: useCheckIfFileIsImageOrVideo(item.url),
			flag: true,
		}))
		showList.value = fileList.value
	})
	//返回
	const goBack = () => {
		uni.navigateBack()
	}
	const cut = (index) => {
		console.log(index, "｜ index");
		dynamicList.value.length = 0
		show.value = false
		initIdx.value = index
		fileList.value.forEach((item) => {
			item.flag = true
		})
		if (index == 2) {
			showList.value = fileList.value.filter((item) => {
				return item.type == "img"
			})
		}
		if (index == 1) {
			showList.value = fileList.value.filter((item) => {
				return item.type == "video"
			})
		}
		if (index == 0) {
			showList.value = fileList.value
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 0 20rpx;
		.tab {
			display: flex;
			justify-content: space-evenly;
			margin-bottom: 30rpx;
			z-index: 100;
			.active {
				font-weight: bold;
				.duan {
					width: 30rpx;
					height: 10rpx;
					background-color: red;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>